<html>
<head>
<title>Address Book History Pattern</title>

<link href="../style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="addressbook">
<div class="header">Address Book</div>

<div id="content">

<ul id="tabs"></ul>

<div id="right">
  <input type="hidden" id="id" name="id" value="" />
  <div id="info" style="display: none;">
    <h2 id="name" title="edit me"></h2>
    <table cellspacing="0" cellpadding="5">
      <tr>
        <td class="colname" align="right">email</td>
        <td id="email"></td>
      </tr>
      <tr>
        <td class="colname" align="right">phone</td>
        <td id="phone"></td>
      </tr>
      <tr>
        <td class="colname" align="right">address</td>
        <td id="address"><div id="street"></div>
          <span id="city"></span>,
          <span id="state"></span>
          <span id="zip"></span>
          </td>
      </tr>
    </table>  
  </div>
  <div id="slider">
  			<div id="trackleft"></div><div id="handle" align="right"><img src="../images/slider-images-handle.png" alt="" /></div>

  			<div id="now" class="control" align="right">Now &rarr;</div>
  			<div id="past" class="control">&larr; Past</div>
  			<div id="history" class="control" align="center"></div>
  </div>
  <div id="editsave">
    <input type="button" id="editsavebutton" value="edit" disabled="true" onclick="edit(this);" style="display: none;"/>
  </div>
  <div id="timestamp" class="control"></div>
  <div id="loaddata" onclick="contactHolder.loadDummyData();" title="Load Dummy Data!">&nbsp;</div>
</div>

</div>

</div>

<script src="../../scripts/prototype-1.5.1.js" type="text/javascript"></script>
<script src="../../scripts/gears_db.js" type="text/javascript"></script>
<script src="../../scripts/slider.js" type="text/javascript"></script>
<script src="addressbook.js" type="text/javascript"></script>

</body>

</html>
